<template>
	<!-- 工具栏 文章类 标签 点赞 踩 -->
	<div class="toolbar">
		<div class="TagClass">
			<span style="font-size:12px">分类专栏：</span>
			<el-button round size="mini" title="文章分类">
				{{ article.className }}
			</el-button>
		</div>

		<div class="TagList">
			<span style="font-size:12px" v-if="tag_list_id_flag">标签专栏：</span>
			<el-button round size="mini" v-for="item in check_tagitem" :key="item?.tagID" :label="item?.tagName">
				{{ item?.tagName }}
			</el-button>
		</div>

		<div class="ContentItem-actions">
			<el-button type="primary" size="medium" plain icon="el-icon-caret-top" @click="onclick_is_like">
				{{ is_like ? '已赞同' : '赞同' }} {{ likeCount }}
			</el-button>
			<el-button type="primary" size="medium" plain icon="el-icon-caret-bottom" @click="onclick_is_unlike">
				{{ is_unlike ? '踩' : '' }}
			</el-button>
		</div>
	</div>
</template>

<script>
	import {
		updata_Article_like_unlike_view
	} from '@/request/api'
	import {
		getTags
	} from '@/request/api'

	export default {
		name: 'wzToolbar',
		props: {
			shsarticle: {
				type: Object,
				default: () => ({
					className: ''
				})
			}
		},
		data() {
			return {
				article: {},
				tag_items: [], // 标签列表
				check_tagitem: [], // 选中的标签
				tag_list_id_flag: false, // 标签栏显示 flag
				is_like: false, // 是否赞同
				is_unlike: false, // 不赞同
				likeCount: 0,
				unlikeCount: 0,
				timer: null // 点赞的定时器
			}
		},
		watch: {
			shsarticle(val) {
				this.article = val
				this.likeCount = val.likeCount
				this.unlikeCount = val.unlikeCount
			}
		},
		mounted() {
			const _this = this
			_this.article = _this.shsarticle
			_this.likeCount = _this.shsarticle.likeCount
			_this.unlikeCount = _this.shsarticle.unlikeCount

			getTags({
					begin_index: 0,
					page_size: 99999
				})
				.then(res => {
					if (res?.data?.code === 200) {
						_this.tag_items = res.data.data.list
						const tagListId = _this.article.tag_list_id
						_this.check_tagitem = []
						if (!tagListId) return

						_this.tag_items.forEach(item => {
							if (tagListId.includes(item.tagID.toString())) {
								_this.check_tagitem.push(item)
								_this.tag_list_id_flag = true
							}
						})
					}
				})
				.catch(err => {
					console.error('获取标签失败：', err)
				})
		},
		methods: {
			/* 更新点赞/踩（防抖 1200ms） */
			updata_Article_like_unlike_vie() {
				updata_Article_like_unlike_view({
					unlikeCount: this.unlikeCount,
					likeCount: this.likeCount,
					articleID: this.article.articleID
				}).then(res => {
					console.log(res.data.msg)
				}).catch(console.error)
			},

			/* 赞同点击 */
			onclick_is_like() {
				this.is_like = !this.is_like
				if (this.is_like) {
					this.likeCount++
					if (this.is_unlike) {
						this.unlikeCount--
						this.is_unlike = false
					}
				} else {
					this.likeCount--
				}
				clearTimeout(this.timer)
				this.timer = setTimeout(this.updata_Article_like_unlike_vie, 1200)
			},

			/* 不赞同点击 */
			onclick_is_unlike() {
				this.is_unlike = !this.is_unlike
				if (this.is_unlike) {
					this.unlikeCount++
					if (this.is_like) {
						this.likeCount--
						this.is_like = false
					}
				} else {
					this.unlikeCount--
				}
				clearTimeout(this.timer)
				this.timer = setTimeout(this.updata_Article_like_unlike_vie, 1200)
			}
		}
	}
</script>

<style scoped>
	/* 工具栏 */
	.toolbar {
		width: 100%;
		margin: 10px 0;
	}

	/* 分类 */
	.toolbar .TagClass {
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		margin: 10px 0;
	}

	/* 标签 */
	.toolbar .TagList {
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		margin: 5px 0;
	}

	/* 操作栏 */
	.ContentItem-actions {
		margin: 5px 0;
		height: 54px;
		line-height: 54px;
	}
</style>